<template>
	<div>
		<el-card class="!border-none" shadow="never" :body-style="{ padding: '5px 20px 0 20px' }">
			<el-tabs v-model="activeTab" @tab-click="handleClick">
				<el-tab-pane v-for="item in tabsMap" :label="item.name" :name="item.type" :index="item.type" :key="item.type" lazy> </el-tab-pane>
			</el-tabs>
		</el-card>
		<el-card shadow="never" class="!border-none pb-4" :body-style="{ padding: '0px' }">
			<el-form ref="formRef" :model="formData" label-width="100px">
				<el-form-item label="协议名称：" prop="name">
					<div class="w-80">
						<el-input v-model.trim="formData.name" placeholder="请输入协议名称" />
					</div>
				</el-form-item>
				<el-form-item label="协议内容：" prop="content">
					<editor v-model="formData.content" width="750px" placeholder="请输入协议内容" />
				</el-form-item>
			</el-form>
		</el-card>
		<footerSubmit>
			<el-button  v-auth="'setting/agreement/edit'" type="primary" @click="handleSubmit">保存</el-button>
		</footerSubmit>
	</div>
</template>

<script lang="ts" setup name="systemAgreement">
import { ref, reactive, onMounted } from 'vue';
import { agreementDetail, agreementEdit } from '/@/api/setting/webset';
import { messageSuccess } from '/@/utils/message';

const formRef = ref(null);

const activeTab = ref(1);

const tabsMap = [
	{
		type: 1,
		name: '服务协议',
	},
	{
		type: 2,
		name: '隐私协议',
	},
];

const handleClick = (tab: any, event: Event) => {
	formData.type = tab.props.name;
	getData();
};

// 表单数据
const formData = reactive({
	type: 1, //类型
	show: true,
	name: '', // 名称
	content: '', // 内容
});

// 获取数据
const getData = async () => {
	const data = await agreementDetail({ type: formData.type });
	for (const key in formData) {
		if(data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
};

// 保存提交
const handleSubmit = async () => {
	await agreementEdit(formData);
	messageSuccess('设置成功');
	getData();
};

onMounted(() => {
	getData();
});

</script>
